import React, { createRef, useCallback, PureComponent } from "react";
import { withRouter } from 'react-router-dom';
import 'cesium/Source/Widgets/widgets.css'
import { connect } from 'react-redux'
import { Space } from "antd"

import Header from './c-cpns/header'
import CenterMap from './c-cpns/center-map/index'
import Left1 from './c-cpns/left1/index'
import Left2 from './c-cpns/left2/index'
import Left3 from './c-cpns/left3'
import Right1 from "./c-cpns/right1";
import Right2 from "./c-cpns/right2";
import Right3 from "./c-cpns/right3";
import CustomModal from '@/components/custom-modal/index'
import CustomTable from "@/components/custom-table"
import ProjectDetail from './c-cpns/project-detail/index'
import PreviewVideo from './c-cpns/preview-video/index'

import { ScreenWarpper } from './style'
import { columns } from './config'
import { getProjectListApi } from '@/api'
import * as commonDictOptions from "@/constants"



class Index extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      showTooltip: false,
      clickX: 0,
      clickY: 0,
      zoom: undefined,
      tooltipParams: {},
      showModal: false,
      showDetailModal: false,
      previewVideoModal: false,
      modalTitle: "",
      topD: [
        {
          label: '在建项目(个)',
          value: 231356,
          color: '#75D7FD'
        },
        {
          label: '高风险项目(个)',
          value: 1,
          color: '#FF577B'
        },
        {
          label: '危大工程项目数(个)',
          value: 231356,
          color: '#F0A04B'
        },
        {
          label: '危大工程数(个)',
          value: 231356,
          color: '#F0A04B'
        },
        {
          label: '超危大工程项目数(项)',
          value: 231356,
          color: '#FF577B'
        },
        {
          label: '超危大工程数(项)',
          value: 231356,
          color: '#FF577B'
        }
      ],
      currentProjectInfo: {}
    }
  }

  zoom() {
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;
    var maxWidth = 1800;
    var cx = width / maxWidth;
    // console.log(cx);
    var maxHeight = 1200;
    var cy = height / maxHeight;
    console.log("width:" + width, "height:" + height, cy)
    // if (cx < cy)
    // document.getElementById("box").style.zoom = cx;
    // else
    document.getElementById("box").style.zoom = cy;
    this.setState({
      zoom: cy
    })
    if (this.state.showTooltip) {
      this.setState({ showTooltip: false })
    }
  }

  componentDidMount() {
    this.zoom();
    window.addEventListener('resize', this.zoom.bind(this));
  }
  mapClickHandle(x, y, isShow, params = {}) {
    this.setState({ showTooltip: isShow })
    if (isShow) {
      const elDomWidth = document.querySelector("#tooltipContainer") && document.querySelector("#tooltipContainer").getBoundingClientRect().width
      const elDomHeight = document.querySelector("#tooltipContainer") && document.querySelector("#tooltipContainer").getBoundingClientRect().height
      const offsetLeft = x / this.state.zoom - elDomWidth * 0.5
      const offsetTop = y / this.state.zoom - elDomHeight
      this.setState({
        clickX: offsetLeft,
        clickY: offsetTop,
        tooltipParams: { ...params }
      })
    }
  }
  clickDetailBtn() {
    const { tooltipParams } = this.state
    if (tooltipParams.projectId) {
      this.setState({
        showModal: true,
        modalTitle: "项目详情",
      })
    } else if (tooltipParams.name) {
      this.setState({
        showModal: true,
        modalTitle: tooltipParams.name
      })
    }
  }
  async clickTableDetailBtn(record) {
    this.setState({
      showDetailModal: true,
      currentProjectInfo: { ...record }
    })
  }

  clickPreviewVideo() {
    this.setState({
      previewVideoModal: true
    })
  }
  getModalDefaultContent() {
    const { tooltipParams } = this.state
    if (tooltipParams.projectId) {
      return <ProjectDetail params={{ id: tooltipParams.projectId }}></ProjectDetail>
    } else if (tooltipParams.name) {
      const _columns = [...columns, {
        title: '操作',
        key: 'action',
        render: (_, record) => <a onClick={(e) => this.clickTableDetailBtn(record)} style={{ color: "#96AFD5" }}>详情</a>
      }
      ];
      return <CustomTable columns={_columns} api={getProjectListApi} params={{ street_id: commonDictOptions.streetOptions.find(v => v.label === tooltipParams.name)?.value }}></CustomTable>
    }
  }

  render() {
    const { tooltipParams, showTooltip, clickX, clickY, showModal, modalTitle, topD, showDetailModal, currentProjectInfo, previewVideoModal } = this.state
    const modalDefaultContent = this.getModalDefaultContent()
    return (
      <ScreenWarpper >
        <div id="box" >
          <div className="tower"></div>
          <div className="tower_left"></div>
          <div className="tower_right"></div>
          <div className="tower_bottom"></div>

          {showTooltip && <div className="tooltip-container" id="tooltipContainer" style={{ left: clickX + 'px', top: clickY + 'px' }}>
            <div className="tooltip">
              <div className="tooltip-content">
                <div className="htitle">{tooltipParams?.name || "-"}</div>
                <div className="title">总造价：50&nbsp;万元</div>
                <div className="title">总面积：10092&nbsp;平方米</div>
                <div className="ltitle">
                  <Space size="middle">
                    <span onClick={e => this.clickDetailBtn()}>查看详情</span>
                    {tooltipParams.projectId && <span onClick={e => this.clickPreviewVideo()}>查看视频</span>}
                  </Space>
                </div>
              </div>
              {/* <span className="triangle"></span> */}
            </div>
          </div>}
          <Header></Header>
          <div className="left_glow"></div>
          <div className="left_glow2"></div>
          <div className="left">
            <Left1 />
            <Left2 />
            <Left3 />
          </div>

          <div className="right_glow"></div>
          <div className="right_glow2"></div>
          <div className="right">
            <Right1></Right1>
            <Right2></Right2>
            {/* <Right3></Right3> */}
          </div>

          <div className="center">
            <div className="screen-overview">
              <div className="screen-overview_box">
                {
                  topD.map((item, index) => {
                    return (<div className="screen-overview_item " key={index}>
                      <span className="value" style={{ color: item.color }}>{item.value}</span>
                      <span className="label">{item.label}</span>
                    </div>);
                  })
                }
              </div>
            </div>
          </div>
        </div>
        <CenterMap mapClickHandle={(x, y, show, params) => this.mapClickHandle(x, y, show, params)} />
        <CustomModal
          isShow={showModal}
          centered={true}
          width={1200}
          title={modalTitle}
          defaultContent={modalDefaultContent}
          setShowStateFn={e => this.setState({ showModal: false })}
        ></CustomModal>
        <CustomModal
          isShow={showDetailModal}
          title="项目详情"
          width={1200}
          defaultContent={
            <ProjectDetail params={{ id: currentProjectInfo?.id }}></ProjectDetail>
          }
          setShowStateFn={e => {
            this.setState({ showDetailModal: false })
          }
          }
        ></CustomModal>
        <CustomModal
          isShow={previewVideoModal}
          title="视频预览"
          width={1200}
          defaultContent={<PreviewVideo builderLicenceNum={tooltipParams?.builderLicenceNum}></PreviewVideo>}
          setShowStateFn={e => {
            this.setState({ previewVideoModal: false })
          }
          }
        ></CustomModal>
      </ScreenWarpper >
    );
  }
}
const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
  }
}


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Index))